<script setup>

    import { ref,onMounted } from 'vue'

    import axios from 'axios'

    import BookList from '@/components/BookList.vue'

    const typeList = ref([])

    //初始化 书籍类型
    const initBookType1 = () =>{
        // axios.get("http://localhost:8080/bookType/findAll");
        // axios 在main.js  中配置了 baseURL  上面的 url 可以省略 简写
        axios.get("/bookType/findAll").then(resp=>{
            console.log(resp.data);
            typeList.value = resp.data;
        }).catch(e=>{
            console.error('Error fetching book types:', e);
        })
    }

    const initBookType = async ()=>{

        try {
            const resp = await axios.get("/bookType/findAll");
            console.log(resp.data);
            typeList.value = resp.data;
        }catch (e) {
            console.error('Error fetching book types:', error);
        }
    }

    const params = ref({
        "pageNum":1,
        "pageSize":12
    })

    // 热销榜页面对象
    const topPage = ref({});

    //获取页面数据
    const initBook = async ()=>{
        try {
            const resp = await axios.post("/book/top",params.value);
            console.log(resp.data);
            topPage.value = resp.data;

            console.log(topPage.value.records);
            console.log(topPage.value.total);

        }catch (e) {
            console.error('Error fetching book types:', error);
        }
    }

    //父组件中 进行分页操作
    const handleCurrentPage = (pageNum)=>{
        console.log("我是父组件，拿到 子组件传递过来的第几页:",pageNum)
        //修改
        params.value.pageNum = pageNum;
        //查询操作 pageNum 进行修改实现了分页
        initBook();
    }

    //tabls 选项卡切换的事件
    const handleTabChange = (tab)=>{

        console.log("handleTabChange.....触发...",tab.props)
        const typeId = tab.props.name;
        console.log("typeId",typeId)
        //每次切换的时候 pageNum = 1
        params.value.pageNum = 1;
        if (typeId){
            //操作2  其他的类型
            findBookByTypeId(typeId)
        }else{
            //操作1  热门数据类型
            initBook()
        }
    }

    //通过type 类型 存储数据的数组
    const typePage = ref({});

    const findBookByTypeId= async (typeId)=>{
        console.log("findBookByTypeId 类型查询....")
        params.value.typeId = typeId
        try {
            const resp = await axios.post("/book/findByType",params.value);
            console.log(resp.data);
            typePage.value = resp.data;

            console.log(typePage.value.records);
            console.log(typePage.value.total);

        }catch (e) {
            console.error('Error fetching book types:', error);
        }
    }

    //安装类型进行 分页查询
    const handleCurrentTypePage = (pageNum)=>{
        params.value.pageNum = pageNum
        findBookByTypeId(params.value.typeId);
    }

    onMounted(()=>{
        //初始化 书籍类型
        initBookType();

        //初始化数据
        initBook();

    })

</script>

<template>
    <div>
        <!-- 导航标签页  -->
        <el-tabs type="border-card" @tab-click="handleTabChange">
            <!-- 第1个标签页，默认显示的 -->
            <el-tab-pane>
                <template #label>
                    <el-icon :size="18"><HotWater /></el-icon>热销榜
                </template>
                <!-- 把 集合数据 传入到BookList 中
                         :book-list     分页的数据       opPage.records
                         :current-page  当前页面数据     params.pageNum
                         :page-size     第几页          params.pageSize
                         :current-page  当前页面数据     topPage.total
                -->
                <BookList :book-list="topPage.records"
                          :current-page="params.pageNum"
                          :page-size="params.pageSize"
                          :total-items="topPage.total"
                          @change-page="handleCurrentPage">
                </BookList>

            </el-tab-pane>
            <!-- 从数据库表中查询出来并且显示 -->
            <el-tab-pane v-for="type in typeList" :key="type.id" :label="type.name" :name="String(type.id)">
                <template #label>
                    <el-icon><Notebook /></el-icon>{{ type.name }}
                </template>
                <!-- 通过类型展示  -->
                <BookList :book-list="typePage.records"
                          :current-page="params.pageNum"
                          :page-size="params.pageSize"
                          :total-items="typePage.total"
                          @change-page="handleCurrentTypePage">
                </BookList>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<style scoped>

</style>